<script lang="ts" setup>
import { ref, watch } from "vue"
import { postStatus } from "@/utils/globleVar"
  const props = defineProps({
    articleInfo:{
        require:true,
        type:Object
    }
  })
  console.log(props.articleInfo)
  const emit = defineEmits()
  //审核
  const onAudit = (articleId:Number,status:String)=>{
    emit('updateStatus',articleId,status)
  }
  //编辑
  const onEdit = (articleId:Number)=>{
    emit('clickEdit',articleId)
  }
  //删除
  const onDel = (articleId:Number)=>{
    emit('clickDel',articleId)
  }
  //无限滚动
const load = ()=>{
    emit('loadMore',props.articleInfo.pageInfo)
} 
  </script>
  <template>
    <div class="article-box">
        <ul 
        v-infinite-scroll="load"
        class="infinite-list" 
        style="overflow: auto">
            <li v-for="article in articleInfo.articleList" :key="article.id"
            class="infinite-list-item">
                <!-- 帖子 -->
                <div class="article">
                    <div class="head">
                        <el-avatar 
                            class="headImg"
                            :size="40" 
                            :src="article.user.avatar"/>
                        <div class="head-right">
                            <h6 class="user">{{ article.user.username }}</h6>
                            <div class="time">{{ article.createdAt }}</div>
                        </div>
                    </div>
                    <div class="title">{{ article.title }}</div>
                    <span class="content">{{ article.content}}</span>
                    <div class="imgs">
                        <img 
                        v-for="img in article.images" 
                        :key="img.id" 
                        :src="img.imageUrl" >
                    </div>
                    <span class="view">
                        <el-icon>
                        <View />
                        </el-icon>浏览
                        <span class="count">{{ article.viewCount }}次</span>
                    </span>
                    <div v-if="article.likes.length" class="like-peoples">
                        <span v-for="(user,index) in article.likes " :key="index" class="count">
                            {{ user.user.username+' '}} 
                        </span>等{{ article.likes.length }}人赞了
                    </div>
                    <!-- 修改审核状态 -->
                    <div class="buttons">
                        <el-button 
                        v-show="article.status === postStatus.draft || article.status === postStatus.rejected"  
                        class="agree button" 
                        type="primary" 
                        @click="onAudit(article.id,postStatus.approved)">通过
                        </el-button>
                        <el-button 
                        v-show="article.status === postStatus.draft || article.status === postStatus.approved" 
                        class="disAgree button"  
                        @click="onAudit(article.id,postStatus.rejected)">驳回
                        </el-button>
                        <el-button class="edit button" @click="onEdit(article)">编辑</el-button>
                        <el-button class="delete button" @click="onDel(article.id)">删除</el-button>
                    </div>
                </div>
                <!-- 评论 -->
                <ul class="comments">
                    <li 
                    v-for="comment in article.comments" :key="comment.id"
                    class="comment">
                        <div class="head">
                            <el-avatar 
                            class="headImg"
                            :size="30" 
                            :src="comment.user.avatar"/>
                            <div class="head-right">
                                 <span class="name">{{ comment.user.username }}</span>
                                <div class="time">{{ comment.createdAt }}</div>
                            </div>
                        </div>
                        <span class="content">{{ comment.content }}</span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    
  </template>
  
  <style lang="scss" scoped>
    .article-box{
        display: flex;
        align-items: start;
        justify-content: start;
        flex-direction: column;
        .infinite-list{
        width: 80%;
        height: 76vh;
        overflow: auto;
        list-style: none;
        display: flex;
        align-items: start;
        flex-direction: column;
        justify-content: space-around;
            .infinite-list-item{
                width: 100%;
                list-style: none;
                .article{  
                   //background-color: aliceblue; 
                    border-radius: 10px; 
                    margin-top: 13px;
                    .head{
                        display: flex;
                        align-items: flex-start;
                        justify-content: start;
                        .headImg{
                            margin: 23px 20px 15px 20px;
                        }
                        .head-right{
                            margin: 20px 20px 15px 0px;
                            .user{
                                margin: 20px 20px 15px 20px;
                                display: inline;
                                margin: 20px 0px 20px;
                            }
                            .time{
                               
                                font-size: 15px;
                                color: rgb(175, 175, 175);
                            }
                        }
                    }          
                    flex-direction: column;
                    .title{
                        margin: 10px 20px;
                    }
                    .content{
                        margin: 10px 20px;
                    }
                    .imgs{
                        margin: 10px 20px;
                        width: 100%;
                        display: flex;
                        align-items: center;
                        flex-direction: row;
                        flex-wrap: wrap;
                        justify-content: start;
                        list-style: none;
                        img{
                            width: 200px;
                            height: 200px;
                            margin: 3px;
                        }
                    }
                    .view{
                        .el-icon{
                        margin-right: 5px;  
                        }
                        display: flex;
                        align-items: center;
                        margin-left: 20px;
                        margin-top: 10px;
                        font-size: 15px;
                        color: rgb(175, 175, 175);
                    }
                    .like-peoples{
                        display: flex;
                        align-items: center;
                        margin-left: 20px;
                        font-size: 18px;
                    }
                    .buttons{
                        display: flex;
                        align-content: center;
                        justify-content: end;
                       // margin: 0px 10px 20px 20px;
                        padding: 10px;
                        .button{
                            border-radius: 20px;
                        }
                        .agree{
                            
                        }
                        .disAgree{
                           
                        }
                        .edit{
                            
                        }
                        .delete{
                           
                        }
                    }
                }
                .comments{
                    //background-color: aliceblue; 
                    border-radius: 10px;
                //width: 100%;
                margin: 0px 0px 20px;
                border-width:1px;
                border-color:var(--el-color-username);
                border-top-style:solid;
                list-style: none;
                display: flex;
                align-items: start;
                flex-direction: column;
                    .comment{
                        margin: 5px 2px;
                        width: auto;
                        height: auto;
                        .head{ 
                            display: flex;
                            align-items: center;
                            width: 100%;                       
                            .headImg{
                                margin-top: 10px;
                            }
                            .head-right{
                                margin: 10px;
                                .name{
                                    margin-top: 10px;
                                    font-size: 15px;
                                    width: auto;
                                }
                                .time{ 
                                color: rgb(179, 179, 179);
                                font-size: 13px;
                                }
                            }
                        }
                        .content{
                            margin-left: 40px;
                        }
                    }
                }
               
            }
        }
    }
  </style>
  